<!--
 * @Author: Bonnie
 * @Date: 2021-12-03 10:58:37
 * @LastEditTime: 2021-12-03 15:10:56
 * @LastEditors: Bonnie
 * @Description:设置选中文案的样式
 * @FilePath: /public_demo/src/views/selection/index.vue
-->
<template>
  <div class="root-container selection-container">
    <article class="sel_user">::selection CSS伪元素应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）</article>
    <article>
      <h1>允许属性</h1>
      <ul>
        <li>color</li>
        <li>background-color</li>
        <li>cursor</li>
        <li>outline</li>
        <li>text-shadow</li>
      </ul>
    </article>

    <article>
      代码示例：
      <br />
      <br />

      <section>
        <span>全局修改</span>
        <pre>
        // 设置全局选中文本的样式
        ::selection {
          color: #8340ff;
          background-color: #e1e1e1;
        }
      </pre>
      </section>

      <section>
        <span>指定标签 | 类名修改</span>
        <pre>
        // 设置指定标签选中文本的样式
        li::selection {
          color: white;
          background-color: black;
        }

        // 设置指定类名选中文本的样式
        .sel_user::selection {
          color: white;
          background-color: black;
        }
      </pre>
      </section>
    </article>
  </div>
</template>
<script>
export default {
  name: "index",
  data() {
    return {};
  }
};
</script>
<style lang='scss' scoped>
.selection-container {
  article {
    section {
      margin-bottom: 30px;
      pre {
        background-color: #292c33;
        color: #abb2bf;
      }
    }
  }
  ul li {
    font-size: 18px;
  }
}
</style>